<template>
    <div>
        <el-input v-model="input" placeholder="请输入内容">
            <el-button slot="append" @click="postMassage">postMessage</el-button>
        </el-input>
        <div>
            来自父级的消息：{{msg}}
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            input: '',
            msg: null
        }
    },
    mounted() {
        this.message()
    },
    beforeDestroy() {
        window.removeEventListener('message', this.handleMessage)
    },
    methods: {
        message() {
            window.addEventListener('message', this.handleMessage, false)
        },
        handleMessage(res) {
            if (window.location.origin !== res.origin) {
                this.msg = res.data.msg;
                this.$message({
                    type: 'warning',
                    message: `来自parent的消息: ${res.data.msg}`
                })
            }
        },
        postMassage() {
            window.parent.postMessage({ msg: this.input }, '*')
        }
    }
}
</script>

<style>

</style>
